<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>ResizeObserver HD-DPI Fullscreen</title>
  <style>
    :root {
      color-scheme: light dark;
    }

    html,
    body {
      margin: 0;
      /* remove default margin */
      height: 100%;
      /* make body fill the browser window */
      display: flex;
      place-content: center center;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .fit-container {
      width: 600px;
      height: 600px;
    }

    .resizable {
      resize: both;
      overflow: scroll;
      /* required because resize doesn't work with overflow: visible, the default */
      max-width: 600px;
      max-height: 600px;
    }
  </style>
</head>

<body>
  <div>
    <p id="description" style="width: 600px;">
      This example shows how to use ResizeObserver, handle HD-DPI correctly, and Fullscreen

      There should be no [Moiré patterns](https://www.google.com/search?q=Moir%C3%A9%20pattern) regardless of zoom level
      (... [except possibly in Safari](https://caniuse.com/mdn-api_resizeobserverentry_devicepixelcontentboxsize)).
    </p>
    <div id="container" class="fit-container">
      <canvas id="webgpu"></canvas>
    </div>
  </div>


  <script type="module" src="./index.ts"></script>
</body>

</html>